<jsp:directive.page contentType="text/html;charset=UTF-8" />

<div class="tabbable">
	<ul class="nav nav-tabs">
		<li class="active"><a href="javascript:#taskList"
			data-toggle="tab">任务列表</a></li>
		<li><a href="javascript:#log" data-toggle="tab">任务日志</a></li>
		<li><a href="javascript:#runRecord" data-toggle="tab">任务运行日志</a></li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane active" id="taskList">
			<div class="panel-group" role="tablist" style="margin-bottom: 0px;">
				<div class="panel panel-default">
					<div class="panel-heading" role="tab"
						id="collapseListGroupHeading1"
						style="padding-top: 5px; padding-bottom: 5px;">
						<table style="width: 100%; height: 100%">
							<tr>
								<td width="30%"></td>
								<td align="center">
									<h4 class="panel-title">Data List</h4>
								</td>
								<td width="30%" align="right">
									<button type="button" class="btn btn-primary btn-sm"
										data-ng-click="query()">查询</button> <a
									class="collapsed btn btn-success btn-sm" title="显示/隐藏查询条件"
									role="button" data-toggle="collapse"
									href="javascript:#collapseListGroup1" aria-expanded="true"
									aria-controls="collapseListGroup1"> <span
										class="glyphicon glyphicon-filter" aria-hidden="true"></span>
								</a>
								</td>
							</tr>
						</table>
					</div>
					<div id="collapseListGroup1" class="panel-collapse collapse in"
						role="tabpanel" aria-labelledby="collapseListGroupHeading1"
						aria-expanded="true" style="height: 40px;">
						<ul class="list-group">
							<li class="list-group-item"
								style="padding-top: 5px; padding-bottom: 5px;">
								<div class="row">
									<div class="col-lg-3">
										<div class="input-group input-group-sm">
											<span class="input-group-addon" style="color:white;background-color: #3c763d;font-weight: bold;">全文检索</span>
											<input type="text" class="form-control"  data-ng-model="$root.keyword" placeholder="请输入关键字">
											<span class="input-group-btn">
												<button class="btn btn-warning" type="button" data-ng-click="$root.keyword=''">清除</button>
											</span>
										</div>
									</div>
									<div class="col-lg-3">
										<div class="input-group input-group-sm">
											<span class="input-group-addon">作业ID</span> <input
												type="text" class="form-control"
												data-ng-model="taskQuery.queryJobId">
										</div>
									</div>
									<div class="col-lg-3">
										<div class="input-group input-group-sm">
											<span class="input-group-addon">任务分组</span> <input
												type="text" class="form-control"
												data-ng-model="taskQuery.taskGroup">
										</div>
									</div>
									<div class="col-lg-3">
										<div class="input-group input-group-sm">
											<span class="input-group-addon">任务名称</span> <input
												type="text" class="form-control"
												data-ng-model="taskQuery.taskName">
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<table class="table table-hover table-striped table-bordered"
				border="1" style="width: 100%;">
				<thead>
					<tr>
						<td align="center">No.</td>
						<td align="center">&nbsp;</td>
						<td align="center">&nbsp;</td>
						<td align="center">&nbsp;</td>
						<td>作业ID</td>
						<td>任务分组</td>
						<td>任务名称</td>
						<td>状态</td>
						<td>开始时间</td>
						<td>结束时间</td>
						<td>任务项</td>
						<td>任务参数</td>
						<td>允许IP地址</td>
					</tr>
				</thead>
				<tbody>
					<tr data-ng-repeat="task in tasks | filter:$root.keyword">
						<td align="center" data-ng-bind="$index + 1"></td>
						<td style="width: 100px;"><a
							href="#/taskRunDetail/{{task.taskId.taskId}}">&nbsp;运行信息&nbsp;</a></td>
						<!-- td style="width: 70px;"><a
							data-ng-show="task.taskStatus == 'STOP' || task.taskStatus == 'INIT'"
							href="#/taskEdit/{{task.taskId.taskId}}/1">&nbsp;编辑&nbsp;</a></td -->
						<td style="width: 70px;"><a
							data-ng-show="task.taskStatus == 'STOP' || task.taskStatus == 'INIT'"
							href="javascript:void(0);" data-ng-click="openEditDialog(task.taskId.taskId,1)">&nbsp;编辑&nbsp;</a></td>
						<!-- td style="width: 70px;"><a
							data-ng-show="task.taskStatus == 'STOP' || task.taskStatus == 'START'"
							href="#/taskEdit/{{task.taskId.taskId}}/0">&nbsp;查看&nbsp;</a></td -->
						<td style="width: 70px;"><a
							data-ng-show="task.taskStatus == 'STOP' || task.taskStatus == 'START'"
							href="javascript:void(0);" data-ng-click="openEditDialog(task.taskId.taskId,0)">&nbsp;查看&nbsp;</a></td>
						<td data-ng-bind="task.taskId.jobId.jobId"></td>
						<td data-ng-bind="task.taskGroup"></td>
						<td data-ng-bind="task.taskName"></td>
						<td data-ng-bind="task.taskStatus"></td>
						<td data-ng-bind="task.runStartTime"></td>
						<td data-ng-bind="task.runEndTime"></td>
						<td data-ng-bind="task.taskItem"></td>
						<td data-ng-bind="task.taskParameter"></td>
						<td data-ng-bind="task.ipWhiteList"></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div id="log" class="tab-pane">
			<div class="panel-group" role="tablist" style="margin-bottom: 0px;">
				<div class="panel panel-default">
					<div class="panel-heading" role="tab"
						id="collapseListGroupHeading2"
						style="padding-top: 5px; padding-bottom: 5px;">
						<table style="width: 100%; height: 100%">
							<tr>
								<td width="30%"></td>
								<td align="center">
									<h4 class="panel-title">Data List</h4>
								</td>
								<td width="30%" align="right">
									<button type="button" class="btn btn-primary btn-sm"
										data-ng-click="logpager.reload()">查询</button> <a
									class="collapsed btn btn-success btn-sm" title="显示/隐藏查询条件"
									role="button" data-toggle="collapse"
									href="javascript:#collapseListGroup2" aria-expanded="true"
									aria-controls="collapseListGroup2"> <span
										class="glyphicon glyphicon-filter" aria-hidden="true"></span>
								</a>
								</td>
							</tr>
						</table>
					</div>
					<div id="collapseListGroup2" class="panel-collapse collapse in"
						role="tabpanel" aria-labelledby="collapseListGroupHeading2"
						aria-expanded="true" style="height: 40px;">
						<ul class="list-group">
							<li class="list-group-item"
								style="padding-top: 5px; padding-bottom: 5px;">
								<div class="row">
									<div class="col-lg-3">
										<div class="input-group input-group-sm">
											<span class="input-group-addon">作业ID</span> <input
												type="text" class="form-control"
												data-ng-model="queryParam.jobId">
										</div>
									</div>
									<div class="col-lg-3">
										<div class="input-group input-group-sm">
											<span class="input-group-addon">任务ID</span> <input
												type="text" class="form-control"
												data-ng-model="queryParam.taskId">
										</div>
									</div>
									<div class="col-lg-6">
										<div class="input-group input-group-sm">
											<span class="input-group-addon">时间区间</span>
											<input type="text" id="datetimepicker"  class="form-control" data-ng-model="queryParam.startTime">
											<span class="input-group-addon" data-ng-click="queryParam.startTime=''"><i class="glyphicon glyphicon-remove"></i></span>
											<span class="input-group-addon">-</span>
											<input type="text" id="datetimepicker2"  class="form-control" data-ng-model="queryParam.endTime">
											<span class="input-group-addon" data-ng-click="queryParam.endTime=''"><i class="glyphicon glyphicon-remove"></i></span>
											<script type="text/javascript">
											$('#datetimepicker').datetimepicker({
											    format: 'yyyy-mm-dd hh:ii'
											});
											$('#datetimepicker2').datetimepicker({
											    format: 'yyyy-mm-dd hh:ii'
											});
											</script>
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<table class="table table-hover table-striped table-bordered"
				border="1" style="width: 100%">
				<thead>
					<tr>
						<td width="200px;">时间</td>
						<td width="200px;">作业ID</td>
						<td width="350px;">任务ID</td>
						<td>任务运行UUID</td>
						<td width="160px;">日志类型</td>
						<td width="80px;">日志内容</td>
					</tr>
				</thead>
				<tbody>
					<tr data-ng-repeat="item in logpager.items">
						<td data-ng-bind="item.logTime | date :'yyyy-MM-dd HH:mm:ss'"></td>
						<td data-ng-bind="item.jobId"></td>
						<td data-ng-bind="item.taskId"></td>
						<td data-ng-bind="item.taskTrackerUuid"></td>
						<td data-ng-bind="item.logType"></td>
						<td>
							<button type="button" class="btn btn-primary btn-xs"
								data-toggle="modal" data-target="#tLogDetail"
								data-whatever="{{$index}}">详情</button>
						</td>
					</tr>
				</tbody>
			</table>
			<pager pager-item="logpager" />
		</div>
		<div id="runRecord" class="tab-pane">
			<div class="panel-group" role="tablist" style="margin-bottom: 0px;">
				<div class="panel panel-default">
					<div class="panel-heading" role="tab"
						id="collapseListGroupHeading3"
						style="padding-top: 5px; padding-bottom: 5px;">
						<table style="width: 100%; height: 100%">
							<tr>
								<td width="30%"></td>
								<td align="center">
									<h4 class="panel-title">Data List</h4>
								</td>
								<td width="30%" align="right">
									<button type="button" class="btn btn-primary btn-sm"
										data-ng-click="runRecordPager.reload()">查询</button> <a
									class="collapsed btn btn-success btn-sm" title="显示/隐藏查询条件"
									role="button" data-toggle="collapse"
									href="javascript:#collapseListGroup3" aria-expanded="true"
									aria-controls="collapseListGroup3"> <span
										class="glyphicon glyphicon-filter" aria-hidden="true"></span>
								</a>
								</td>
							</tr>
						</table>
					</div>
					<div id="collapseListGroup3" class="panel-collapse collapse in"
						role="tabpanel" aria-labelledby="collapseListGroupHeading3"
						aria-expanded="true" style="height: 40px;">
						<ul class="list-group">
							<li class="list-group-item"
								style="padding-top: 5px; padding-bottom: 5px;">
								<div class="row">
									<div class="col-lg-3">
										<div class="input-group input-group-sm">
											<span class="input-group-addon">作业ID</span> <input
												type="text" class="form-control"
												data-ng-model="queryRunRecordParam.jobId">
										</div>
									</div>
									<div class="col-lg-3">
										<div class="input-group input-group-sm">
											<span class="input-group-addon">任务ID</span> <input
												type="text" class="form-control"
												data-ng-model="queryRunRecordParam.taskId">
										</div>
									</div>
									<div class="col-lg-6">
										<div class="input-group input-group-sm">
											<span class="input-group-addon">时间</span> <input
												type="text" class="form-control">
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<table class="table table-hover table-striped table-bordered"
				border="1" style="width: 100%">
				<thead>
					<tr>
						<td width="160px;">任务项</td>
						<td width="110px;">开始时间</td>
						<td width="110px;">结束时间</td>
						<td width="110px;">状态同步时间</td>
						<td width="110px;">最后拉取数据时间</td>
						<td width="70px;">运行线程数</td>
						<td width="70px;">成功数量</td>
						<td width="70px;">失败数量</td>
						<td width="70px;">读取次数</td>
						<td width="70px;">读取数据量</td>
						<td width="70px;">最后状态</td>
					</tr>
				</thead>
				<tbody>
					<tr data-ng-repeat="item in runRecordPager.items">
						<td data-ng-bind="item.taskItem"></td>
						<td data-ng-bind="item.runStartTime | date :'yyyy-MM-dd HH:mm:ss'"></td>
						<td data-ng-bind="item.runEndTime | dateFilter"></td>
						<td data-ng-bind="item.lastStatusUpdateTime | dateFilter"></td>
						<td data-ng-bind="item.lastFetchDataTime | dateFilter"></td>
						<td data-ng-bind="item.threadNum"></td>
						<td data-ng-bind="item.dealDataSucess"></td>
						<td data-ng-bind="item.dealDataFail" style=""></td>
						<td data-ng-bind="item.fetchDataCount"></td>
						<td data-ng-bind="item.fetchDataNum"></td>
						<td data-ng-bind="item.taskItemStatus"></td>
					</tr>
				</tbody>
			</table>
			<pager pager-item="runRecordPager" />
		</div>
	</div>
</div>

<div class="modal fade" id="tLogDetail" tabindex="-1" role="dialog"
	aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="exampleModalLabel">Detail</h4>
			</div>
			<div class="modal-body">
				<form>
					<div class="form-group">
						<input type="text" class="form-control" id="recipient-name"
							readonly="readonly" width="100%">
					</div>
					<div class="form-group">
						<label for="message-text" class="control-label">Message:</label>
						<textarea class="form-control" id="message-text" rows="15"
							readonly="readonly"></textarea>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>